<script setup>

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })

    let data = $ref([
        { name: '党组织', numb: 3, unit: '个' },
        { name: '五星级党支部', numb: 120, unit: '个' },
        { name: '党员', numb: 3, unit: '人' },
        { name: '党活动', numb: 3, unit: '次' },
    ])

</script>

<template>
    <div class="party-wrap">
        <div class="card-title"><img src="../../../assets/images/card-title-icon-1.png">党建引领</div>

        <div class="info-item flex-center">
            <div 
                class="item"
                v-for="(item, index) in props.list"
                :key="index"
            >
                <p class="value">{{ item.name }}</p>
                <p class="count"><span>{{ item.numb }}</span>{{ data[index].unit }}</p>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .party-wrap{
        width: 100%;
        height: 254px;

        .info-item {
            width: 420px;
            height: 193px;
            background: url('../../../assets/images/party-card-bg.png') center no-repeat;
            margin: 16px auto 0;
            flex-wrap: wrap;

            .item{
                width: 210px;
                height: 102px;
                font-size: 18px;
                color: #fff;
                text-align: center;
                padding: 20px;
            }
            
            .count{
                padding-top: 10px;
                span{
                    font-weight: bold;
                    font-size: 30px;
                }
            }
        }
    }
</style>